<%--
Created by IntelliJ IDEA.
User: lixuefeng
Date: 16/4/10
Time: 19:20
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>职位需求状况</title>
    <jsp:include page="/common/header.jsp"/>
    <!-- 这里用requirejs来做模块加载器 -->
    <script src="http://requirejs.org/docs/release/2.1.20/minified/require.js"></script>
    <!-- Chartx图表库文件引入，这里已1.9.21的cdn版本为例 -->
    <script src="http://g.tbcdn.cn/thx/charts/1.9.51/chartx/index-min.js"></script>
</head>
<body>
<jsp:include page="/common/navbar.jsp"/>
<!-- 为Chartx准备一个具备大小（宽高）的Dom -->
<div id="allTest" style="width:600px;height:300px;">
</div>
<%--<p>整个互联网行业是建立在计算机技术开发的基础之上，因此该行业对于技术类人才的需求占了--%>
    <%--73%左右。然而现在的互联网产品的模仿非常严重，新产品上线不久就有很多的竞争者。加之现在的--%>
    <%--互联网产品中技术越来越不能成为其壁垒，那么除了产品自身优秀外，市场与销售的作用就非常的关--%>
    <%--键，可以说决定着产品的前途和命运。</p>--%>
<!-- 为Chartx准备一个具备大小（宽高）的Dom -->
<div id="techTest" style="width:600px;height:300px;">
</div>
<%--<p>技术类细分行业对于研发工程师的需求占了其所属类别职位的85%左右</p>--%>
<!-- 为Chartx准备一个具备大小（宽高）的Dom -->
<div id="marketTest" style="width:600px;height:300px;">
</div>
<%--<p>市场和销售类细分行业对于销售的需求占了其所属类别职位的94%左右</p>--%>
<script>
    //chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组，
    var data = [
        ["node", "value"],
        ["技术", 3518],
        ["市场和销售", 634],
        ["运营", 140],
        ["设计", 174],
        ["产品", 202],
        ["职能", 122]
    ];
    var options = {
        xAxis: {
            field: "node"
        },
        yAxis: {
            field: "value"
        },
        tips: {
            //enabled  : false,
            content: function (info) {
                return info.name + "：" + info.percentage + "%"
            }
        },
        //周边tip
        dataLabel: {
            //enabled: false,
            //是否绘制连接线(注意：此配置仅限于扇形块比较分散，若扇形比较紧密时，无连线会导致识别混淆)
            //allowLine:false,
            //format: '{point.name} : {point.y}' //和下面等价
            format: function (data) {
                return "<div><span>" + data.name + "</span>：<span>" + data.y + "（" + data.percentage + "%）</span></div>"
            }

        },
        //饼图的起始角度[有效值范围0-360度，默认值0度
        //饼图的绘制是从起始角度开始，顺时针绘制，参考饼图的绘制动画.
        startAngle: -90,
        //数据排序，默认按用户给定顺序[desc/asc]
        sort: 'desc',
        //是否允许扇形hover时slice,若设置为false,则单击扇形触发slice
        allowPointSelect: true,
        //是否允许动画
        animation: true,
        //内圆半径
        innerRadius: 50,
        //颜色序列,若不设置，会有默认的颜色序列
        //colors:['red', 'yellow', 'blue']

        checked: {
            enabled: true
        }
    };
    Chartx.pie("allTest", data, options).then(function (pie) {
        window.pie = pie;
        //pie.slice(3);
        pie.on('focus', function (e) {
            console.log(e.type);
        });
        pie.on('unfocus', function (e) {
            console.log(e.type);
        });
        pie.on('click', function (e) {
            console.log(e.type);
        });
        pie.on('mousedown', function (e) {
            console.log(e.type);
        });
        pie.on('mouseup', function (e) {
            console.log(e.type);
        });
        pie.on('mousemove', function (e) {
            console.log(e.type);
        });
        pie.on('dblclick', function (e) {
            console.log(e.type);
        });

        /*
         _.each( pie.getLabelList() , function( pos ){
         $("#canvasTest").append("<div style='position:absolute;width:"+pos.width+"px;height:"+pos.height+"px;left:"+pos.x+"px;top:"+pos.y+"px;border:1px solid red;'></div>");
         } );
         */
    });
</script>
<script>
    var data = [
        ["xfield", "开发", "测试", "数据", "运维", "算法", "产品经理"],
        ["技术类", 1889, 73, 125, 30, 69, 27]
    ];
    var options = {
        type: "horizontal",
        proportion: true,
        yAxis: {
            field: [["开发", "测试", "数据", "运维", "算法", "产品经理"]]
        },
        xAxis: {
            field: ["xfield"]
        }
    }

    Chartx.bar("techTest", data, options);
</script>
<script>
    var data = [
        ["xfield", "销售", "营销", "策划"],
        ["市场与销售类", 501, 23, 7]
    ];
    var options = {
        type: "horizontal",
        proportion: true,
        yAxis: {
            field: [[ "销售", "营销", "策划"]]
        },
        xAxis: {
            field: ["xfield"]
        }
    }

    Chartx.bar("marketTest", data, options);
</script>
</body>
</html>